<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue指令综合练习</title>
     <script src="./js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
            padding: 20px;
        }
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
            padding: 25px;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
        .card h2 {
            color: #2575fc;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #555;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border 0.3s;
        }
        input:focus, select:focus, textarea:focus {
            border-color: #2575fc;
            outline: none;
            box-shadow: 0 0 0 2px rgba(37, 117, 252, 0.2);
        }
        button {
            background: #2575fc;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: background 0.3s, transform 0.2s;
        }
        button:hover {
            background: #1a68e8;
            transform: translateY(-2px);
        }
        button:active {
            transform: translateY(0);
        }
        .btn-danger {
            background: #ff4757;
        }
        .btn-danger:hover {
            background: #ff3742;
        }
        .btn-success {
            background: #2ed573;
        }
        .btn-success:hover {
            background: #26c965;
        }
        .user-list {
            list-style: none;
            margin-top: 15px;
        }
        .user-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 10px;
            transition: background 0.3s;
        }
        .user-item:hover {
            background: #e9ecef;
        }
        .highlight {
            background-color: #fff9c4;
            padding: 2px 5px;
            border-radius: 3px;
        }
        .dynamic-style {
            padding: 15px;
            border-radius: 6px;
            text-align: center;
            margin-top: 15px;
            transition: all 0.3s;
        }
        .toggle-container {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        .toggle-btn {
            flex: 1;
        }
        .message {
            padding: 15px;
            border-radius: 6px;
            margin-top: 15px;
            text-align: center;
            font-weight: 600;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .warning {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .todo-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
        }
        .todo-item input[type="checkbox"] {
            width: auto;
            margin-right: 10px;
        }
        .todo-text {
            flex: 1;
        }
        .completed {
            text-decoration: line-through;
            color: #6c757d;
        }
        .counter {
            font-size: 2rem;
            text-align: center;
            margin: 20px 0;
            color: #2575fc;
            font-weight: bold;
        }
        .counter-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        .footer {
            text-align: center;
            color: white;
            margin-top: 40px;
            padding: 20px;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <header>
            <h1>Vue指令综合练习</h1>
            <p class="subtitle">探索Vue.js各种指令的实际应用</p>
        </header>

        <div class="card-container">
            <!-- 数据绑定与表单处理 -->
            <div class="card">
                <h2>数据绑定与表单处理</h2>
                <div class="form-group">
                    <label for="name">姓名：</label>
                    <input type="text" id="name" v-model="user.name" placeholder="请输入您的姓名">
                </div>
                <div class="form-group">
                    <label for="email">邮箱：</label>
                    <input type="email" id="email" v-model="user.email" placeholder="请输入您的邮箱">
                </div>
                <div class="form-group">
                    <label for="role">角色：</label>
                    <select id="role" v-model="user.role">
                        <option value="student">学生</option>
                        <option value="teacher">教师</option>
                        <option value="developer">开发者</option>
                        <option value="designer">设计师</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="bio">个人简介：</label>
                    <textarea id="bio" v-model="user.bio" rows="3" placeholder="请简要介绍自己"></textarea>
                </div>
                <button @click="addUser" class="btn-success">添加用户</button>
                
                <div v-if="users.length > 0" class="user-list">
                    <h3>用户列表：</h3>
                    <ul>
                        <li v-for="(user, index) in users" :key="index" class="user-item">
                            <div>
                                <strong>{{ user.name }}</strong> ({{ user.role }}) - {{ user.email }}
                            </div>
                            <button @click="removeUser(index)" class="btn-danger">删除</button>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 条件渲染 -->
            <div class="card">
                <h2>条件渲染</h2>
                <div class="form-group">
                    <label>选择显示内容：</label>
                    <div class="toggle-container">
                        <button @click="activeTab = 'welcome'" class="toggle-btn" 
                                :class="{'btn-success': activeTab === 'welcome'}">欢迎信息</button>
                        <button @click="activeTab = 'features'" class="toggle-btn"
                                :class="{'btn-success': activeTab === 'features'}">功能特性</button>
                        <button @click="activeTab = 'contact'" class="toggle-btn"
                                :class="{'btn-success': activeTab === 'contact'}">联系我们</button>
                    </div>
                </div>
                
                <div v-if="activeTab === 'welcome'" class="message success">
                    <h3>欢迎使用Vue指令练习!</h3>
                    <p>这是一个展示Vue.js各种指令用法的综合示例。</p>
                </div>
                
                <div v-else-if="activeTab === 'features'" class="message warning">
                    <h3>Vue.js 核心特性</h3>
                    <ul style="text-align: left; margin-top: 10px;">
                        <li>响应式数据绑定</li>
                        <li>组件化开发</li>
                        <li>指令系统</li>
                        <li>虚拟DOM</li>
                    </ul>
                </div>
                
                <div v-else class="message error">
                    <h3>联系我们</h3>
                    <p>如果您有任何问题，请发送邮件至: contact@example.com</p>
                </div>
                
                <div class="form-group" style="margin-top: 20px;">
                    <label>
                        <input type="checkbox" v-model="showExtraInfo"> 显示额外信息
                    </label>
                </div>
                
                <div v-show="showExtraInfo" class="message success">
                    <p>这是通过 <span class="highlight">v-show</span> 指令控制显示的内容。</p>
                    <p>与 <span class="highlight">v-if</span> 不同，<span class="highlight">v-show</span> 只是切换元素的 display 属性。</p>
                </div>
            </div>

            <!-- 动态样式与类绑定 -->
            <div class="card">
                <h2>动态样式与类绑定</h2>
                <div class="form-group">
                    <label for="bgColor">背景颜色：</label>
                    <input type="color" id="bgColor" v-model="styleConfig.bgColor">
                </div>
                <div class="form-group">
                    <label for="textColor">文字颜色：</label>
                    <input type="color" id="textColor" v-model="styleConfig.textColor">
                </div>
                <div class="form-group">
                    <label for="fontSize">字体大小：</label>
                    <input type="range" id="fontSize" v-model="styleConfig.fontSize" min="12" max="30">
                    <span>{{ styleConfig.fontSize }}px</span>
                </div>
                <div class="form-group">
                    <label for="borderRadius">圆角：</label>
                    <input type="range" id="borderRadius" v-model="styleConfig.borderRadius" min="0" max="20">
                    <span>{{ styleConfig.borderRadius }}px</span>
                </div>
                
                <div class="dynamic-style" 
                     :style="{
                         backgroundColor: styleConfig.bgColor,
                         color: styleConfig.textColor,
                         fontSize: styleConfig.fontSize + 'px',
                         borderRadius: styleConfig.borderRadius + 'px'
                     }">
                    这个区域的样式是动态绑定的！
                </div>
                
                <div class="form-group" style="margin-top: 20px;">
                    <label>
                        <input type="checkbox" v-model="isHighlighted"> 高亮文本
                    </label>
                    <label style="margin-left: 15px;">
                        <input type="checkbox" v-model="isBordered"> 添加边框
                    </label>
                </div>
                
                <div class="dynamic-style" 
                     :class="{
                         'highlight': isHighlighted,
                         'bordered': isBordered
                     }"
                     style="margin-top: 10px;">
                    这个区域的类名是动态绑定的！
                    <div v-if="isHighlighted" style="margin-top: 10px; font-size: 0.9em;">
                        ⭐ 当前文本已被高亮
                    </div>
                </div>
            </div>

            <!-- 列表渲染与待办事项 -->
            <div class="card">
                <h2>列表渲染与待办事项</h2>
                <div class="form-group">
                    <label for="newTodo">新任务：</label>
                    <input type="text" id="newTodo" v-model="newTodo" @keyup.enter="addTodo" placeholder="输入任务后按回车添加">
                </div>
                <button @click="addTodo" class="btn-success">添加任务</button>
                
                <div v-if="todos.length > 0" style="margin-top: 20px;">
                    <h3>任务列表 ({{ incompleteTodos }}/{{ todos.length }} 未完成)</h3>
                    <div v-for="(todo, index) in todos" :key="index" class="todo-item">
                        <input type="checkbox" v-model="todo.completed">
                        <span class="todo-text" :class="{ completed: todo.completed }">{{ todo.text }}</span>
                        <button @click="removeTodo(index)" class="btn-danger">删除</button>
                    </div>
                    
                    <div class="toggle-container" style="margin-top: 15px;">
                        <button @click="filter = 'all'" class="toggle-btn" 
                                :class="{'btn-success': filter === 'all'}">全部</button>
                        <button @click="filter = 'active'" class="toggle-btn"
                                :class="{'btn-success': filter === 'active'}">未完成</button>
                        <button @click="filter = 'completed'" class="toggle-btn"
                                :class="{'btn-success': filter === 'completed'}">已完成</button>
                    </div>
                </div>
                
                <div v-else style="margin-top: 20px; text-align: center; color: #6c757d;">
                    暂无任务，请添加新任务。
                </div>
            </div>

            <!-- 事件处理与计数器 -->
            <div class="card">
                <h2>事件处理与计数器</h2>
                <div class="counter">
                    {{ counter }}
                </div>
                <div class="counter-buttons">
                    <button @click="increment">增加</button>
                    <button @click="decrement">减少</button>
                    <button @click="reset">重置</button>
                </div>
                
                <div class="form-group" style="margin-top: 20px;">
                    <label for="step">步长：</label>
                    <input type="number" id="step" v-model.number="step" min="1" max="10">
                </div>
                
                <div style="margin-top: 20px;">
                    <h3>操作历史</h3>
                    <ul class="user-list">
                        <li v-for="(action, index) in history" :key="index" class="user-item">
                            {{ action }}
                        </li>
                    </ul>
                    <button @click="clearHistory" class="btn-danger" style="margin-top: 10px;">清空历史</button>
                </div>
            </div>

            <!-- 计算属性与侦听器 -->
            <div class="card">
                <h2>计算属性与侦听器</h2>
                <div class="form-group">
                    <label for="price">商品价格：</label>
                    <input type="number" id="price" v-model.number="price" min="0">
                </div>
                <div class="form-group">
                    <label for="quantity">购买数量：</label>
                    <input type="number" id="quantity" v-model.number="quantity" min="1">
                </div>
                <div class="form-group">
                    <label for="taxRate">税率(%)：</label>
                    <input type="number" id="taxRate" v-model.number="taxRate" min="0" max="50">
                </div>
                
                <div style="margin-top: 20px; background: #f8f9fa; padding: 15px; border-radius: 6px;">
                    <h3>订单详情</h3>
                    <p>单价: ¥{{ price }}</p>
                    <p>数量: {{ quantity }}</p>
                    <p>小计: ¥{{ subtotal }}</p>
                    <p>税费({{ taxRate }}%): ¥{{ tax }}</p>
                    <p style="font-weight: bold; font-size: 1.2em; margin-top: 10px;">总计: ¥{{ total }}</p>
                </div>
                
                <div v-if="discountMessage" class="message success" style="margin-top: 15px;">
                    {{ discountMessage }}
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>Vue指令综合练习 &copy; 2023 - 探索Vue.js的强大功能</p>
        </footer>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                // 数据绑定与表单处理
                user: {
                    name: '',
                    email: '',
                    role: 'student',
                    bio: ''
                },
                users: [],
                
                // 条件渲染
                activeTab: 'welcome',
                showExtraInfo: false,
                
                // 动态样式与类绑定
                styleConfig: {
                    bgColor: '#e3f2fd',
                    textColor: '#1976d2',
                    fontSize: 16,
                    borderRadius: 6
                },
                isHighlighted: false,
                isBordered: false,
                
                // 列表渲染与待办事项
                newTodo: '',
                todos: [
                    { text: '学习Vue指令', completed: false },
                    { text: '完成项目练习', completed: true },
                    { text: '阅读Vue文档', completed: false }
                ],
                filter: 'all',
                
                // 事件处理与计数器
                counter: 0,
                step: 1,
                history: [],
                
                // 计算属性与侦听器
                price: 100,
                quantity: 1,
                taxRate: 10,
                discountMessage: ''
            },
            computed: {
                // 过滤待办事项
                filteredTodos() {
                    if (this.filter === 'active') {
                        return this.todos.filter(todo => !todo.completed);
                    } else if (this.filter === 'completed') {
                        return this.todos.filter(todo => todo.completed);
                    }
                    return this.todos;
                },
                // 未完成的任务数量
                incompleteTodos() {
                    return this.todos.filter(todo => !todo.completed).length;
                },
                // 计算小计
                subtotal() {
                    return this.price * this.quantity;
                },
                // 计算税费
                tax() {
                    return (this.subtotal * this.taxRate / 100).toFixed(2);
                },
                // 计算总计
                total() {
                    return (parseFloat(this.subtotal) + parseFloat(this.tax)).toFixed(2);
                }
            },
            watch: {
                // 监听总计变化
                total(newValue, oldValue) {
                    if (newValue > 500) {
                        this.discountMessage = '订单金额超过500元，可享受9折优惠！';
                    } else {
                        this.discountMessage = '';
                    }
                }
            },
            methods: {
                // 添加用户
                addUser() {
                    if (this.user.name && this.user.email) {
                        this.users.push({...this.user});
                        this.user.name = '';
                        this.user.email = '';
                        this.user.bio = '';
                    } else {
                        alert('请填写姓名和邮箱！');
                    }
                },
                // 删除用户
                removeUser(index) {
                    this.users.splice(index, 1);
                },
                // 添加待办事项
                addTodo() {
                    if (this.newTodo.trim()) {
                        this.todos.push({
                            text: this.newTodo,
                            completed: false
                        });
                        this.newTodo = '';
                    }
                },
                // 删除待办事项
                removeTodo(index) {
                    this.todos.splice(index, 1);
                },
                // 计数器方法
                increment() {
                    this.counter += this.step;
                    this.history.push(`增加 ${this.step}，当前值: ${this.counter}`);
                },
                decrement() {
                    this.counter -= this.step;
                    this.history.push(`减少 ${this.step}，当前值: ${this.counter}`);
                },
                reset() {
                    this.counter = 0;
                    this.history.push(`重置计数器，当前值: ${this.counter}`);
                },
                // 清空历史记录
                clearHistory() {
                    this.history = [];
                }
            }
        });
    </script>
</body>
</html>